<script setup>
import { ref, reactive, onMounted, h } from 'vue';
import { Goods_Manage, Goods_Category, Marketing_Coupons_List } from "@/api";

// 加载商品列表
let activeName = ref(1)
let goodsHeader = ref([])
let goods_header = async () => {
    let { status, msg, data } = await Goods_Manage.goods_header();
    if (status === 200) {
        goodsHeader.value = data.list;
    }
}

// 搜索
let searchForm = reactive({
    cate_id: '',
    store_name: '',
})

// 商品分类选项
let options = ref([])
let options_list = async () => {
    let { status, msg, data } = await Goods_Category.tree_list(1);
    if (status === 200) {
        options.value = data;
    }
}
let handleSelectChange = async (val) => {
    searchForm.cate_id = val;
    let { status, msg, data } = await Goods_Manage.goods_list({ page: 1, limit: 15, type: type.value, cate_id: searchForm.cate_id });
    if (status === 200) {
        goodsData.value = data.list;
    }
}
let handleGoodsSearch = async () => {
    let { status, msg, data } = await Goods_Manage.goods_list({ page: 1, limit: 15, type: type.value, cate_id: searchForm.cate_id, store_name: searchForm.store_name });
    if (status === 200) {
        goodsData.value = data.list;
    }
}

// 商品表格
let goodsData = ref([])
let selectedIds = ref([])
let handleSelectionTable = (tab) => {
    let selected = [];
    if (tab.length) {
        tab.forEach(item => {
            selected.push(item.id);
            selectedIds.value = selected;
        })
    } else {
        selectedIds.value = [];
    }
}

let goods_list = async () => {
    let { status, msg, data } = await Goods_Manage.goods_list({ page: 1, limit: pageSize.value, type: 1 });
    if (status === 200) {
        goodsData.value = data.list;
        total.value = data.count;
        loading.value = false;
    }
}
// 加载效果
let loading = ref(true)
// 上下架
let handleSwitch = async (item) => {
    let id = item.id;
    let is_show = item.is_show ? 1 : 0;
    let { status, msg } = await Goods_Manage.goods_set_show(id, is_show);
    if (status === 200) {
        ElMessage.success(msg);
        if (item.is_show === 0 || item.is_show === 1) {
            // 操作DOM
            let index = goodsData.value.findIndex(goods => goods.id === item.id);
            if (index !== -1) {
                goodsData.value.splice(index, 1);
                goods_header();
            }
        }
    } else {
        item.is_show = 1;
        ElMessage.error(msg);
    }
}

// 商品类别切换
let type = ref(1)
let handleTabsChange = async (tab) => {
    type.value = tab.props.name;
    let { status, msg, data } = await Goods_Manage.goods_list({ page: 1, limit: 15, type: type.value });
    if (status === 200) {
        goodsData.value = data.list;
    }
}

// 分隔栏
let size = ref(10)
let spacer = h(ElDivider, { direction: 'vertical' })


// 商品采集
let goods_gather_visible = ref(false)
let linkForm = reactive({
    address: '',
})
let handleGoodsGarther = async () => {
    let { status, msg } = await Goods_Manage.goods_garther(linkForm.address);
    if (status === 200) {
        goods_gather_visible.value = false;
    } else {
        ElMessage.error(msg);
    }
}
let handleGatherClose = () => {
    linkForm.address = '';
}

// 商品分类
let goods_cate_visible = ref(false)
let goods_cate = ref([])
let handleGoodsCate = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        goods_cate_visible.value = true;
    }
}
let handleSubCate = async () => {
    let { status, msg } = await Goods_Manage.bath_setting({ ids: selectedIds.value, cate_id: goods_cate.value });
    if (status === 200) {
        goods_cate_visible.value = false;
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 物流设置
let goods_logistics_visible = ref(false)
let logForm = reactive({
    logistics: [],
    freight: '',
    postage: null,
    temp_id: '',
})
let template_options = ref([])
let ref_logForm = ref(null)
let template_list = async () => {
    let { status, msg, data } = await Goods_Manage.get_template();
    if (status === 200) {
        template_options.value = data;
    }
}
let handleLogistics = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        template_list();
        goods_logistics_visible.value = true;
    }
}
let handleLogClose = () => {
    ref_logForm.value.resetFields();
}
let handleSetLog = async () => {
    let setLog = Object.assign({}, { ids: selectedIds.value }, logForm);
    let { status, msg } = await Goods_Manage.bath_setting(setLog);
    if (status === 200) {
        goods_logistics_visible.value = false;
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 购买送积分
let goods_integral_visible = ref(false)
let integralForm = reactive({
    give_integral: 0,
})
let handleIntegral = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        goods_integral_visible.value = true;
    }
}
let handleIntegralSubmit = async () => {
    let { status, msg } = await Goods_Manage.bath_setting({ ids: selectedIds.value, give_integral: integralForm.give_integral });
    if (status === 200) {
        goods_integral_visible.value = false;
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 购买送优惠券
let goods_coupons_visible = ref(false)
let couponsForm = ({})
let handleCoupons = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        goods_coupons_visible.value = true;
    }
}
let coupons_list_visible = ref(false)
let couponsData = ref([])
let handleAddCoupons = async () => {
    let { status, msg, data } = await Marketing_Coupons_List.coupon_list({ receive_type: 3 });
    if (status === 200) {
        couponsData.value = data.list;
        coupons_list_visible.value = true;
    }
}

// 关联用户标签
let user_tags_visible = ref(false)
let userTagsForm = reactive({
    label: '',
})
let handleUserTags = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        user_tags_visible.value = true;
    }
}
// 隐藏下拉框
let userTags = ref(null)
let handleShowTags = () => {
    userTags.value.blur();
}

// 活动推荐
let activity_recommend_visible = ref(false)
let activity = reactive({
    recommend: [],
})
let handleActivity = () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要修改的商品！");
    } else {
        activity_recommend_visible.value = true;
    }
}
let handleActivitySubmit = async () => {
    let { status, msg } = await Goods_Manage.bath_setting({ ids: selectedIds.value, recommend: activity.recommend });
    if (status === 200) {
        activity_recommend_visible.value = false;
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 批量下架
let handleBatchUnshow = async () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要下架的商品！");
    } else {
        let { status, msg } = await Goods_Manage.batch_product_unshow({ ids: selectedIds.value });
        if (status === 200) {
            goods_header();
            goods_list();
            ElMessage.success(msg);

        } else {
            ElMessage.error(msg);
        }
    }
}
// 批量上架
let handleBatchShow = async () => {
    if (!selectedIds.value.length) {
        ElMessage.warning("请选择要上架的商品！");
    } else {
        let { status, msg } = await Goods_Manage.batch_product_show({ ids: selectedIds.value });
        if (status === 200) {
            ElMessage.success(msg);
            goods_header();
        } else {
            ElMessage.error(msg);
        }
    }
}

// 查看商品
let check_product_visible = ref(false)
let checkGoods = ref([])
let handleCheckProduct = async (id) => {
    let { status, msg, data } = await Goods_Manage.product_detail(id);
    if (status === 200) {
        checkGoods.value = data.productInfo;
        check_product_visible.value = true;
    }
}

// 移入回收站
let handleRecycleBin = (id) => {
    ElMessageBox.confirm(
        '确定要移入回收站吗？',
        '移入回收站',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Goods_Manage.recycle_bin(id);
            if (status === 200) {
                // 操作DOM
                let index = goodsData.value.findIndex(item => item.id === id);
                goodsData.value.splice(index, 1);
                goods_header();
                ElMessage.success(msg);
            } else {
                ElMessage.error(msg);
            }
        })
        .catch(() => {
            ElMessage.info("已取消该操作！");
        })
}
// 恢复商品
let handleRecover = (id) => {
    ElMessageBox.confirm(
        '确定要恢复商品吗？',
        '恢复商品',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Goods_Manage.recycle_bin(id);
            if (status === 200) {
                // 操作DOM
                let index = goodsData.value.findIndex(item => item.id === id);
                goodsData.value.splice(index, 1);
                goods_header();
                ElMessage.success(msg);
            } else {
                ElMessage.error(msg);
            }
        })
        .catch(() => {
            ElMessage.info("已取消该操作！");
        })
}

// 页码
let currentPage = ref(1)
let pageSize = ref(5)
let total = ref(0)
let handleSizeChange = async (pageNum) => {
    let { status, msg, data } = await Goods_Manage.goods_list({ page: 1, limit: pageSize.value });
    if (status === 200) {
        goodsData.value = data.list;
        total.value = data.count;
    }
}
let handleCurrentChange = async (pageNum) => {
    let { status, msg, data } = await Goods_Manage.goods_list({ page: pageNum, limit: pageSize.value });
    if (status === 200) {
        goodsData.value = data.list;
        total.value = data.count;
    }
}

onMounted(() => {
    goods_header();
    goods_list();
    options_list();
})
</script>

<template>
    <el-card class="box-card" shadow="never">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabsChange">
            <el-tab-pane v-for="tab in goodsHeader" :label="tab.name + '(' + tab.count + ')'"
                :name="tab.type"></el-tab-pane>
            <div class="goods-search">
                <el-form :model="searchForm">
                    <el-form-item label="商品分类">
                        <el-select v-model="searchForm.cate_id" clearable placeholder="请选择商品分类"
                            @change="handleSelectChange">
                            <el-option v-for="item in options" :key="item.id" :value-key="item.id"
                                :label="item.html + item.cate_name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品搜索">
                        <el-input v-model="searchForm.store_name">
                            <template #append>
                                <el-button icon="Search" @click="handleGoodsSearch" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="goods-btn">
                <router-link :to="{ name: 'Add_Product', params: {} }">
                    <el-button type="primary" icon="Plus" style="margin-right: 15px;">添加商品</el-button>
                </router-link>
                <el-button type="success" @click="goods_gather_visible = true">商品采集</el-button>
                <el-dropdown>
                    <el-button type="primary">
                        批量修改<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleGoodsCate">商品分类</el-dropdown-item>
                            <el-dropdown-item @click="handleLogistics">物流设置</el-dropdown-item>
                            <el-dropdown-item @click="handleIntegral">购买送积分</el-dropdown-item>
                            <el-dropdown-item @click="handleCoupons">购买送优惠券</el-dropdown-item>
                            <el-dropdown-item @click="handleUserTags">关联用户标签</el-dropdown-item>
                            <el-dropdown-item @click="handleActivity">活动推荐</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button type="primary" v-show="type === 1" @click="handleBatchUnshow">批量下架</el-button>
                <el-button v-show="type === 2" @click="handleBatchShow">批量上架</el-button>
                <el-button icon="Upload">导出</el-button>
            </div>
            <el-table v-loading="loading" :data="goodsData" @selection-change="handleSelectionTable"
                :header-cell-style="{ background: '#f4f3f9', color: '#606266', height: '50px' }">
                <el-table-column type="expand">
                    <template #default="props">
                        <div m="4" style="background-color: #f8f8f9;padding: 10px;">
                            <p m="t-0 b-2">商品分类：{{ props.row.cate_name }}</p>
                            <p m="t-0 b-2">商品市场价格：{{ props.row.ot_price }}</p>
                            <p m="t-0 b-2">成本价：{{ props.row.cost }}</p>
                            <p m="t-0 b-2">收藏：{{ props.row.collect }}</p>
                            <p m="t-0 b-2">虚拟销量{{ props.row.ficti }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="selection" />
                <el-table-column property="id" label="商品ID" />
                <el-table-column label="商品图">
                    <template #default="scope">
                        <el-image :src="scope.row.image" style="width: 56px;height: 56px;" fit="fill" />
                    </template>
                </el-table-column>
                <el-table-column property="store_name" label="商品名称" width="300px" />
                <el-table-column property="product_type" label="商品类型" />
                <el-table-column property="price" label="商品售价" />
                <el-table-column property="sales" label="销量" />
                <el-table-column property="stock" label="库存" />
                <el-table-column property="sort" label="排序" />
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="0" inline-prompt
                            active-text="上架" inactive-text="下架" @change="handleSwitch(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300px">
                    <template #default="scope">
                        <el-space :size="size" :spacer="spacer">
                            <el-button link type="primary" size="small"
                                @click="handleCheckProduct(scope.row.id)">查看</el-button>
                            <router-link :to="{ path: 'add_product', query: { product_id: scope.row.id } }">
                                <el-button link type="primary" size="small">编辑</el-button>
                            </router-link>
                            <!-- router-link的传参方式与vue2不同 -->
                            <router-link :to="{ path: 'product_reply', query: { product_id: scope.row.id } }">
                                <el-button link type="primary" size="small">查看评论</el-button>
                            </router-link>
                            <el-button link type="primary" size="small" v-if="type !== 6"
                                @click="handleRecycleBin(scope.row.id)">移到回收站</el-button>
                            <el-button link type="primary" size="small" v-if="type === 6"
                                @click="handleRecover(scope.row.id)">恢复商品</el-button>
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码 -->
            <div class="page">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                    background layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-tabs>
    </el-card>

    <!-- 商品采集 -->
    <el-dialog v-model="goods_gather_visible" title="复制淘宝、天猫、京东、苏宁、1688" @close="handleGatherClose">
        <el-card shadow="hover" style="margin-bottom: 20px;">
            <p>生成的商品默认是没有上架的，请手动上架商品！ 您当前剩余0条采集次数，<el-link type="primary" :underline="false">增加采集次数</el-link></p>
            <p>商品采集设置：设置 > 系统设置 > 第三方接口设置 > 采集商品配置</p>
        </el-card>
        <el-form :model="linkForm" label-width="120px">
            <el-form-item label="链接地址：">
                <el-input v-model="linkForm.address" placeholder="请输入链接地址" class="input-with-select" style="width:300px">
                    <template #append>
                        <el-button icon="Search" @click="handleGoodsGarther" />
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 商品分类 -->
    <el-dialog v-model="goods_cate_visible" title="批量设置" width="50%">
        <span>商品分类：</span>
        <el-select v-model="goods_cate" multiple placeholder="请选择商品分类" style="width: 240px">
            <el-option v-for="item in options" :key="item.id" :label="item.html + item.cate_name" :value="item.id"
                :disabled="item.pid === 0" />
        </el-select>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="goods_cate_visible = false">取消</el-button>
                <el-button type="primary" @click="handleSubCate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 物流设置 -->
    <el-dialog v-model="goods_logistics_visible" title="批量设置" @close="handleLogClose">
        <el-divider content-position="left">物流设置</el-divider>
        <el-form ref="ref_logForm" :model="logForm" label-width="120px">
            <el-form-item label="物流方式：" prop="logistics">
                <el-checkbox-group v-model="logForm.logistics">
                    <el-checkbox label="1">快递</el-checkbox>
                    <el-checkbox label="2">到店核算</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="运费设置：" prop="freight">
                <el-radio-group v-model="logForm.freight" class="ml-4">
                    <el-radio :label="0" size="large">固定运费</el-radio>
                    <el-radio :label="1" size="large">运费模板</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="logForm.freight === 0" prop="postage">
                <el-input-number v-model="logForm.postage" class="mx-4" controls-position="right" placeholder="请输入金额" />
            </el-form-item>
            <el-form-item v-show="logForm.freight === 1">
                <el-select v-model="logForm.temp_id" prop="temp_id" clearable placeholder="请选择运费模板">
                    <el-option v-for="item in template_options" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="goods_logistics_visible = false">取消</el-button>
                <el-button type="primary" @click="handleSetLog">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 购买送积分 -->
    <el-dialog v-model="goods_integral_visible" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form :model="integralForm" label-width="120px">
            <el-form-item label="赠送积分：">
                <el-input-number v-model="integralForm.give_integral" class="mx-4" controls-position="right"
                    placeholder="请输入积分" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="goods_integral_visible = false">取消</el-button>
                <el-button type="primary" @click="handleIntegralSubmit">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 购买送优惠券 -->
    <el-dialog v-model="goods_coupons_visible" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form :model="couponsForm" label-width="120px">
            <el-form-item label="赠送优惠券：">
                <el-button type="primary" @click="handleAddCoupons">添加优惠券</el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="goods_coupons_visible = false">取消</el-button>
                <el-button type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 优惠券列表 -->
    <el-dialog v-model="coupons_list_visible" title="优惠券列表">
        <el-table :data="couponsData" style="width: 100%;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="ID" />
            <el-table-column property="coupon_title" label="优惠券名称" width="100" />
            <el-table-column property="type" label="优惠券类型" width="100" />
            <el-table-column property="coupon_price" label="面值" />
            <el-table-column property="use_min_price" label="最低消费额" width="100" />
            <el-table-column property="#" label="发布数量" />
            <el-table-column property="#" label="有效期限" />
            <el-table-column label="状态">
                <template #default="scope"><el-tag>{{ scope.row.status ? '正常' : '非正常' }}</el-tag></template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="coupons_list_visible = false">取消</el-button>
                <el-button type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 关联用户标签 -->
    <el-dialog v-model="user_tags_visible" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form :model="userTagsForm" label-width="120px">
            <el-form-item label="关联用户标签:">
                <el-select ref="userTags" @click="handleShowTags" v-model="userTagsForm.label" multiple
                    placeholder="选择用户关联标签" style="width: 240px">
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="user_tags_visible = false">取消</el-button>
                <el-button type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 活动推荐 -->
    <el-dialog v-model="activity_recommend_visible" title="批量设置">
        <el-divider content-position="left">营销设置</el-divider>
        <el-form :model="activity" label-width="120px">
            <el-form-item label="商品推荐：">
                <el-checkbox-group v-model="activity.recommend">
                    <el-checkbox label="is_hot">热卖单品</el-checkbox>
                    <el-checkbox label="is_benefit">促销单品</el-checkbox>
                    <el-checkbox label="is_best">精品推荐</el-checkbox>
                    <el-checkbox label="is_new">首发新品</el-checkbox>
                    <el-checkbox label="is_good">优品推荐</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="activity_recommend_visible = false">取消</el-button>
                <el-button type="primary" @click="handleActivitySubmit">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 查看商品 -->
    <el-dialog class="abow_dialog" style="border-radius: 30px;" v-model="check_product_visible" title="详情预览" width="25%"
        center align-center>
        <div class="dialog-content">
            <div class="slider-image">
                <span class="demonstration">商品详情</span>
                <el-carousel trigger="click" height="150px" style="height: 300px;">
                    <el-carousel-item v-for="item in checkGoods.slider_image" :key="item" style="height: 300px;">
                        <el-image :src="item" fit="fill" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="sells">
                <div class="sell-price">￥{{ checkGoods.price }}</div>
                <div class="sell-vip">￥{{ checkGoods.vip_price }}</div>
            </div>
            <div class="sell-name">{{ checkGoods.store_name }}</div>
            <div class="sell-detail">
                <div>原价：{{ checkGoods.ot_price }}</div>
                <div>库存：{{ checkGoods.stock }}个</div>
                <div>销量：{{ checkGoods.ficti }}个</div>
            </div>
            <div class="introduce">
                <span>商品介绍</span>
                <div v-html="checkGoods.description"></div>
            </div>
        </div>
    </el-dialog>
</template>

<style lang="less" scoped>
.box-card {
    .demo-tabs {
        .goods-search {
            .el-form {
                display: flex;
                margin-top: 15px;

                .el-form-item {
                    margin-right: 20px;
                }
            }
        }

        .goods-btn {
            margin-bottom: 20px;

            .el-dropdown {
                margin-left: 15px;
                margin-right: 15px;

                .el-button {
                    outline: 0;
                }
            }
        }
    }
}

.dialog-content {
    max-height: 470px;
    overflow-y: auto;
    padding: 10px;

    .slider-image {
        text-align: center;

        .el-image {
            width: 100%;
        }
    }

    .sells {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .sell-price {
            font-size: 25px;
            color: #ff3838;
            margin-right: 15px;
        }

        .sell-vip {
            font-size: 15px;
            color: #333;
        }
    }

    .sell-name {
        font-size: 16px;
        color: #333;
        padding: 5px 0;
    }

    .sell-detail {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #999;
        padding: 10px 0;
    }

    .introduce {
        text-align: center;
    }
}

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;

        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}

.page {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>

<style>
.check-goods {
    border-radius: 30px;
    height: 80%;
}
</style>